
<template>
	<s-layout
	  navbar="inner" :bgStyle="{ color: 'rgb(235, 62, 51)' }"
	>
		<view class="page-smash-egg">
		
			<!-- 背景图 -->
			<view class="bgc">
				<image src="@/static/images/bgc.png" mode="widthFix" />
			</view>
			
			<image @click="stopPlayAudio()" class="music-img" :class="{'rotating-music': isPlay}" src="@/static/jbdu-golden_egg/music-img.png"></image>
			
			<view class="zj-jl" @click="goList()">中奖记录</view>
		
			<!-- 标题 -->
		
			<!-- 主要部分 -->
			<view class="main-title">100%中奖你还在等什么</view>
		
			<!-- 剩余次数 -->
			<!-- <view class="remaining">剩余次数：{{ remainingNum }}次</view> -->
		
			<!-- 蛋区 -->
			<view class="main">
				<view class="cl-row">
					<view class="cl-col" :span="8" v-for="(item, index) in list" :key="index">
						<view class="item" @tap.stop="smash(item)">
							<!-- 蛋 -->
							<image
								src="@/static/images/egg.png"
								mode="aspectFill"
								class="egg"
								v-if="item.eggVisibel == true"
							/>
		
							<!-- 砸蛋阶段1 -->
							<image
								src="@/static/images/step-1.png"
								mode="aspectFill"
								class="step1"
								v-if="item.step1Visibel == true"
							/>
		
							<!-- 砸蛋阶段2 -->
							<image
								src="@/static/images/step-2.png"
								mode="aspectFill"
								class="step2"
								v-if="item.step2Visibel == true"
							/>
		
							<!-- 砸蛋阶段3 -->
							<image
								src="@/static/images/step-3.png"
								mode="aspectFill"
								class="step3"
								v-if="item.step3Visibel == true"
							/>
		
							<!-- 未中奖 -->
							<image
								src="@/static/images/no-general.png"
								mode="aspectFill"
								class="no-general"
								v-if="item.winLotter == true"
							/>
		
							<!-- 锤子 -->
							<view class="hammer" v-if="item.hammerVisible == true">
								<image src="@/static/images/hammer.png" mode="aspectFill" />
							</view>
						</view>
					</view>
				</view>
	
			</view>
			
			<su-popup class="cl-popup" ref="popup" :show="startVisible" type="center" round="20" backgroundColor="transparent">
				<view class="prize">
					<image src="@/static/images/prize.png" mode="aspectFill" class="prize-bgc" />
					
					<!-- 奖品内容 -->
					<view class="content" style="bottom: 20rpx;">
						<text class="prize-tips">选择要抽奖的区域</text>
						<!-- 按钮 -->
						<view class="btn">
							<button class="c-button" :class="{'a-c-button': startType == '1'}" @click="changeType('1')">{{max_prize_money}}</button>
							<button class="c-button" :class="{'a-c-button': startType == '2'}" @click="changeType('2')">{{prize_money}}</button>
						</view>
					</view>
				</view>
				<!-- 关闭按钮 -->
				<view class="close" @tap="startVisible = false" v-show="false">
					<image src="@/static/images/close.png" mode="aspectFill" />
				</view>
			</su-popup>
		
			<!-- 奖品弹窗 -->
			<su-popup class="cl-popup" ref="popup" :show="prizeVisible" type="center" round="20" backgroundColor="transparent">
				<view class="prize">
					<image src="@/static/images/prize.png" mode="aspectFill" class="prize-bgc" />
		
					<!-- 奖品内容 -->
					<view class="content">
						<!-- 奖品标题 -->
						<text class="prize-title">恭喜您获得</text>
						<!-- 提示 -->
						<!-- <text class="prize-tips">{{draw.title}}</text> -->
						<!-- 奖金 -->
						<view class="prize-bonus">
							<text class="price">{{draw.title}}</text>
							<!-- <text class="unit">元</text> -->
						</view>
						<!-- 按钮 -->
						<!-- <view class="btn">
							<cl-button round>分享好友即可领取</cl-button>
						</view> -->
					</view>
				</view>
				<!-- 关闭按钮 -->
				<view class="close" @tap="closePrize">
					<image src="@/static/images/close.png" mode="aspectFill" />
				</view>
			</su-popup>
		</view>
	
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/egg/bgc.png');
</script>
<script>
export default {
	
	data() {
		return {
			startVisible: false,
			startType: '1',
			remainingNum: 5, // 砸蛋次数
			eggNum: 9, // 蛋数量
			list: [], // 蛋列表
			prizeVisible: false, // 中奖弹窗
			process: false, // 砸蛋过程中
			draw: {},
			max_prize_money:'',
			prize_money:'',
			Audio1: sheep.$url.cdn('/Audio/Audio_01.wav'),
			Audio2: sheep.$url.cdn('/Audio/Audio_02.mp3'),
			isPlay: true,
			innerAudioContext: null
		};
	},
	onReady() {
		// 初始化list
		// this.list = new Array(this.eggNum).fill().map((e) => {
		// 	return (e = {
		// 		hammerVisible: false, // 锤子显示
		// 		eggVisibel: true, // 蛋显示
		// 		step1Visibel: true, // 第一阶段显示
		// 		step2Visibel: true, // 第二阶段显示
		// 		step3Visibel: true, // 第三阶段显示
		// 		winLotter: false, // 未中奖
		// 		ifOver: false, // 是否已砸开
		// 	});
		// });
		this.getList()
		this.startVisible = true
		this.createAudio()
	},
	onUnload() {
		this.innerAudioContext.destroy()
	},
	methods: {
		createAudio() {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.loop = true;
			this.innerAudioContext.src = this.Audio2
			this.innerAudioContext.onPlay(() => {
			  this.isPlay = true
			});
		},
		stopPlayAudio() {
			this.isPlay = !this.isPlay
			
			if(this.isPlay) {
				this.innerAudioContext.play()
			}else {
				this.innerAudioContext.pause()
			}
			
		},
		playAudio() {
			this.isPlay = true
			this.innerAudioContext.play()
		},
		changeType(type) {
			this.startType = type
			console.log(type);
			this.startVisible = false
			
		},
		// 分享拼团
		goList() {
		  sheep.$router.go('/pages/user/go-golden/go-golden-list');
		},
		getList() {
			sheep.$api.prize.list().then(res => {
				this.max_prize_money = res.data.max_prize_money
				this.prize_money = res.data.prize_money
				this.list = res.data.data.map((e) => {
					return {
						...e,
						hammerVisible: false, // 锤子显示
						eggVisibel: true, // 蛋显示
						step1Visibel: true, // 第一阶段显示
						step2Visibel: true, // 第二阶段显示
						step3Visibel: true, // 第三阶段显示
						winLotter: false, // 未中奖
						ifOver: false, // 是否已砸开
					}
				})
			})
		},
		// 砸蛋
		smash(item) {
			if (item.ifOver == true) {
				// 已打开的蛋不能再次打开
				return false;
			}

			// 砸蛋的过程中，不能砸其他蛋
			if (this.process == true) {
				return false;
			}

			// 次数为0，不能砸蛋
			// if (this.remainingNum < 1) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 	  title: '次数用完了哦~',
			// 	});
			// 	return false;
			// } else {
			// 	this.remainingNum--;
			// }

			// 生成中奖随机数，0- 中奖，1- 未中奖
			let ifWinLotter = Math.round(Math.random() * (2 - 1) + 1);

			// 锤子砸蛋动画
			item.hammerVisible = true;

			setTimeout(() => {
				// 锤子隐藏
				item.hammerVisible = false;

				// 隐藏蛋
				item.eggVisibel = false;
				setTimeout(() => {
					// 隐藏第一阶段
					item.step1Visibel = false;

					setTimeout(() => {
						// 隐藏第二阶段
						item.step2Visibel = false;

						setTimeout(() => {
							// 隐藏第三阶段
							item.step3Visibel = false;
							
							sheep.$api.prize.buy_financial({id: item.id, type: this.startType}).then(res => {
								this.innerAudioContext.src = this.Audio1
								this.playAudio()
								
								setTimeout(() => {
									this.innerAudioContext.src = this.Audio2
									this.playAudio()
								}, 3500)
								
								if(res.code == 1) {
									this.prizeVisible = true; // 中奖弹窗
									item.step3Visibel = true;
									item.winLotter = false;
									this.process = false;
									this.draw = res.data
									this.max_prize_money = res.data.data.max_prize_money
									this.prize_money = res.data.data.prize_money
								}else {
									item.winLotter = true; // 未中奖笑脸
									this.process = false;
									uni.showToast({
										icon: 'error',
									  title: res.msg,
									});
								}
							})
							
							// if (ifWinLotter == 1) {
							// 	this.prizeVisible = true; // 中奖弹窗
							// 	item.step3Visibel = true;
							// 	item.winLotter = false;
							// 	this.process = false;
							// } else {
							// 	item.winLotter = true; // 未中奖笑脸
							// 	this.process = false;
							// 	uni.showToast({
							// 	  title: '太可惜了，就差一点~',
							// 	});
							// }
						}, 100);
					}, 100);
				}, 100);
			}, 700);
			item.ifOver = true; // 蛋已打开
			this.process = true; // 开蛋过程中
		},

		// 关闭奖品弹窗
		closePrize() {
			console.log('22');
			this.prizeVisible = false;
		},
	},
};
</script>

<style lang="scss" scoped>
	::v-deep {
		.fixed-bg{
			background: rgba(235, 73, 64, 1) !important;
		}
	}
.page-smash-egg {
	.c-button {
		width: 300rpx;
		background: none;
		border: 2rpx solid #fff;
		color: #fff;
		margin: 20rpx 0;
	}
	.a-c-button {
		background-color: rgb(249, 219, 142);
		color: #fe3c3f;
	}
	width: 100%;
	height: 100%;
	// position: relative;
	background: v-bind(headerBg) no-repeat;
	background-size: 100% 100%;
	
	.bgc {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		image {
			display: block;
			width: 100%;
		}
	}
	.music-img {
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	@keyframes rotate {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	 
	.rotating-music {
	  animation: rotate 2s linear infinite;
	}
	.zj-jl {
		position: relative;
		z-index: 9;
		color: #ffffff;
		border-radius: 8rpx;
		border: 1rpx solid #fff;
		width: fit-content;
		float: right;
		margin-right: 30rpx;
		margin-top: 20rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
	}
	.title {
		width: 100%;
		padding-top: 46rpx;
		text-align: center;
		font-size: 44rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.main-title {
		position: absolute;
		top: 718rpx;
		width: 100%;
		text-align: center;
		font-size: 33rpx;
		font-weight: 500;
		color: #fe3c3f;
	}
	.remaining {
		position: absolute;
		top: 794rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffdf6e;
	}
	.main {
		position: absolute;
		top: 840rpx;
		width: calc(100% - 108rpx);
		height: 730rpx;
		margin: 0 54rpx;
		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 232rpx;
			image {
				width: 211rpx;
				height: 232rpx;
			}
			.egg {
				position: absolute;
				z-index: 99;
			}
			.step1 {
				position: absolute;
				z-index: 88;
			}
			.step2 {
				position: absolute;
				z-index: 77;
			}
			.step3 {
				position: absolute;
				z-index: 66;
			}
			.no-general {
				position: absolute;
			}
			.hammer {
				position: absolute;
				top: 0;
				right: -22rpx;
				width: 130rpx;
				height: 144rpx;
				z-index: 99;
				animation: smash 0.2s infinite;
				animation-direction: alternate;
				@keyframes smash {
					from {
						transform: rotate(0deg);
					}
					to {
						transform: rotate(-30deg);
					}
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.cl-row {
		display: flex;
		flex-wrap: wrap;
		
		.cl-col {
			width: 33.3333%;
		}
	}
	.cl-popup {
		.prize {
			position: relative;
			width: 621rpx;
			height: 769rpx;
			margin-bottom: 40rpx;
			&-bgc {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				left: 60rpx;
				bottom: 150rpx;
				width: 500rpx;
				.prize-title {
					margin-bottom: 20rpx;
					font-size: 40rpx;
					font-weight: 500;
					color: #ffffff;
				}
				.prize-tips {
					margin-bottom: 30rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #feffb3;
				}
				.prize-bonus {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-weight: bold;
					color: #feffb3;
					font-size: 50rpx;
					font-weight: bold;
					color: #feffb3;
				}
				.btn {
					margin-bottom: 40rpx;
					// /deep/.cl-button {
					// 	background: linear-gradient(0deg, #ffbe4e 0%, #ffe485 100%);
					// 	::after {
					// 		border: 0;
					// 	}
					// 	&__text {
					// 		font-size: 28rpx;
					// 		font-weight: 500;
					// 		font-style: italic;
					// 		color: #f41018;
					// 	}
					// }
				}
			}
		}
		.close {
			width: 100%;
			text-align: center;
			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
}
</style>
